<section class="container">
	<div class="google-map find">
		<div class="search-bar">
			<div class="search">
				<?php 
				$form = $this->beginWidget('CActiveForm', array(
				    'id' => 'search',
				    'enableAjaxValidation' => false,
				    'enableClientValidation' => true,
				    'method' => 'get',
				    'action' => 'find-yard-sale.html',
				    'htmlOptions' => array(
				        'class' => 'form-horizontal',
				        //'enctype' => 'multipart/form-data',
				    ),
				        ));?>
					<input type="text" name="search" placeholder="Search a yard sale place by city, zip code, ..." />
					<input type="hidden" value="<?php if(isset($_GET['search'])) echo $_GET['search'];?>" id="textSearch">
					<input type="submit" class="icon-search" value="" />
				<?php
				$this->endWidget();?>
			</div>
		</div>
		<!--end search bar-->
		<div id="map_canvas"></div>
		<div class="list-items" id="list-items" <?php if(isset($result) && count($result) == 0) echo 'style="display:none"';?>>
			<div class="close">
				<span></span>
			</div>
			<ul id="items" class="items">
			</ul>
			<div class="loadmore">
				<a href="javascript:void(0);">LOAD MORE</a>
			</div>
			<div class="icon-more">
				<a href="javascript:void(0);">
					<img src="<?php echo Yii::app()->theme->baseUrl?>/frontend/images/icon-load.png">
				</a>
			</div>
		</div>
		<div class="btn-group">
			<a class="btn-post" href="javascript:void(0);" id="postsale">
				<i class="icon"></i>
				Post a Yard Sale							
			</a>
			<a href="#" class="btn-new">
					New List
				<span class="number">
					<?php 
						if(isset(Yii::app()->session['_newlist']))
							echo Yii::app()->session['_newlist'];
						else
							echo 0;?>
				</span>
			</a>
		</div>
		<?php $this->Widget('AdsWidget');?>
	</div>
</section>
<?php
if(!isset($search) || count($result) == 0):?>
	<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl?>/frontend/js/maps.js"></script>
<?php
elseif(count($result) >0) :?>
	<script type="text/javascript">		
		var moved = false; 
		function initialize() {
			<?php
			$array = array();
			$array_lat = array();
			$array_lng = array();
			$X = $Y = $Z = 0;
			$lat = 0;
			$lng = 0;
			foreach($result as $row){
				array_push($array, [$row['lat'], $row['lng'], 0, $row['id'], $row['title'], $row['description'], $row['cover_photo'], $row['start_date'], $row['end_date'], $row['street']]);
				array_push($array_lat, $row['lat']);
				array_push($array_lng, $row['lng']);
				$lat = $row['lat'] * pi() / 180;
				$lng = $row['lng'] * pi() / 180;
				$X += cos($lat) * cos($lng);
				$Y += cos($lat) * sin($lng);
				$Z += sin($lat);
			}
			$X /= $X/ count($result);
			$Y /= $Y/ count($result);
			$Z /= $Z/ count($result);
			$lng = atan2($Y, $X);
			$hyp = sqrt($X*$X + $Y*$Y);
			$lat = atan2($Z, $hyp);
			$lat = $lat * 180 / pi();
			$lng = $lng *180 / pi();
			$minLat = min($array_lat);
			$maxLat = max($array_lat);
			$minLng = min($array_lng);
			$maxLng = max($array_lng);
			?>
			infoWnd = new google.maps.InfoWindow();
			//var data = [['-105.94337', '32.899937', '0', "98754009"]];
			var data = <?=json_encode($array)?>;
			var myLatlng = new google.maps.LatLng(<?=$lat?>, <?=$lng?>);

			//this uses the range of the points as the bounds
			var myLatlngBounds = new google.maps.LatLngBounds(
					new google.maps.LatLng(<?=$minLat?>, <?=$minLng?>)
					, new google.maps.LatLng(<?=$maxLat?>, <?=$maxLng?>)
				);
			//0=normal, 1=featured			
			var dots = ["http://6a66e047f3e460001b08-9c8de170feb0883ba5649f745b33cd82.r86.cf2.rackcdn.com/ico_yardsale@2x.png","http://6a66e047f3e460001b08-9c8de170feb0883ba5649f745b33cd82.r86.cf2.rackcdn.com/ico_featured@2x.png"]
			
			var myOptions = {
		      //zoom: 14,
		      scaleControl: true,
		      center: myLatlng,
		      maxZoom: 16,
		      mapTypeId: google.maps.MapTypeId.ROADMAP
		    }
		    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		    map.fitBounds(myLatlngBounds);
		    
		    for(var i=0;i<data.length;i++){
		        var row = data[i];
		        var image = dots[row[2]];
		        var myLatlng = new google.maps.LatLng(row[0],row[1]);
		        var marker = createMarker(
					map, 
					myLatlng, 
					row[4], //title
					row[5], //desc
					row[6], //photo
					row[7], //start_date
					row[8], //end_date
					row[9] //address
				);    
					//Creates a sidebar button for the marker
				createMarkerButton(marker);
		    }
		    	    
		}//initialize()
		function createMarker(map, latlng, title, description, photo, start_date, end_date, address) {
		  //Creates a marker
		  var marker = new google.maps.Marker({
		    position : latlng,
		    map : map,
		    title : title,
		    desc: description,
		    photo: photo,
		    start_date: start_date,
		    end_date: end_date,
		    address: address,
		    icon: '/themes/default/frontend/images/icon-address.png'
		  });
		  
		  //The infoWindow is opened when the sidebar button is clicked
		  google.maps.event.addListener(marker, "click", function(){
		  	var html = '<div class="item"><div class="head-item">' +
							'<div class="image-item">' +
								'<img src="/images/'+photo+'">' +
							'</div>' +
							'<div class="title-item">' +
								'<a href="javascript:void(0);">'+title+'</a>' +
							'</div>' +
						'</div>' +
						'<div class="content-item">' +
							'<p class="address-item">' +address + '</p>' +
							'<p class="calendar-item">' +start_date + ' - ' + marker.end_date +'</p>' +
							'<p>' + description + '</p>' +
						'</div></div>';
		    infoWnd.setContent(html);
		    infoWnd.open(map, marker);
		  });
		  return marker;
		}
		function createMarkerButton(marker) {
		  //Creates a sidebar button
		  	var div = document.getElementById("items");
			var li = document.createElement("li");
		  	var html = '<div class="head-item">' +
							'<div class="left-item">' +
								'<img src="/images/'+marker.photo+'">' +
							'</div>' +
							'<div class="right-item">' +
								'<a href="javascript:void(0);">' + marker.getTitle() + '</a>' +
								'<p class="address-item">' + marker.address + '</p>' +
								'<p class="calendar-item">' + marker.start_date + ' - ' + marker.end_date + '</p>' +
							'</div>' +
						'</div>' +
						'<div class="content-item">' +
								'<p>' + marker.desc + '</p>' +
						'</div>';
		  	li.innerHTML = html;
		  	li.setAttribute('class','item-view');
		  	div.appendChild(li)
		  
		  //Trigger a click event to marker when the button is clicked.
		  google.maps.event.addDomListener(li, "click", function(){
		    google.maps.event.trigger(marker, "click");
		  });
		}
		google.maps.event.addDomListener(window, "load", initialize);
	</script>
<?php endif;?>